<template>
  <div>
      <div class="shop-head">
          <shop-head></shop-head>
      </div>
      <div class="table">
          <div class="tab-item">
              <router-link to="/shop/goods" replace>点餐</router-link>
          </div>
          <div class="tab-item">
              <router-link to="/shop/ratings" replace>评价</router-link>
          </div>
          <div class="tab-item">
              <router-link to="/shop/info" replace>商品</router-link>
          </div>
      </div>
      <keep-alive>
          <router-view></router-view>
      </keep-alive>
  </div>
</template>

<script>
import ShopHead from '../../components/ShopHead/ShopHead.vue'
export default {
    mounted(){
        this.$store.dispatch('getInfo')
        this.$store.dispatch('getGoods')
        this.$store.dispatch('getRatings')
    },
    components:{
        ShopHead
    }
}
</script>

<style lang="less" scoped>
.table{
    height: 40px;
    line-height: 40px;
    background: #fff;
    border-bottom: 1px solid rgba(7, 17, 27, 0.1);
    display: flex;
    justify-content: space-around;
    .tab-item{
        font-size: 14px;
        color: rgb(77, 85, 93);
        a{
            position: relative;
            display: block;
            &.router-link-active{
                color: #02a774;
                &::after{
                    position: absolute;
                    content: '';
                    left: 50%;
                    bottom: 1px;
                    width: 35px;
                    height: 2px;
                    transform: translateX(-50%);
                    background: #02a774;
                }
            }
                
        }
    }
}
</style>